import { defineComponent, reactive, ref, computed } from "vue";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import styles from "./voucher.module.less";
import { message } from "ant-design-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { useStore as useUserStore } from "@/store/user";
import { PlusOutlined } from "@ant-design/icons-vue";
import type { UploadProps } from "ant-design-vue";
import { getBase64ByFile } from "@/common/utils";
import { $uploadImg } from "@/api/frontUpload/frontUpload";
import { $AddVoucher,$groupOrderPayDetail} from "@/api/groupOrder/groupOrder";
export default defineComponent({
  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const userStore = useUserStore();
    const state = reactive({
      status: "",
      pay_time:"",
      remark:"",
      form: {
        voucherlist: [],
        id_nolist: [],
        legal_person_list: [],
        application_form_list: [],
        payment_voucher: "",
        identification:"",
        idcard_of_legal_person:"",
        application_form:"",
        order_no: "",
       
      },
      rules: {
        voucherlist: [{ required: true, message: "请上传凭证" }],
      },
    } as any);
    const cancelHandler = () => {
      addPopupRef.value.close();
    };
    const confirmHandler = (e: any) => {
        // console.log("state",state.form);
      // Object.keys(state.form).forEach((x: any) => {
      //   if (x != "order_no" && x != "payment_voucher") {
      //     if (state.form[x][0]?.url) {
      //       if (state.form.payment_voucher == "") {
      //         state.form.payment_voucher = state.form[x][0].url;
      //       } else {
      //         state.form.payment_voucher =
      //           state.form.payment_voucher + "," + state.form[x][0].url;
      //       }
      //     }
      //   }
      // });
      console.log("1111",state.form);
      e.form.voucherlist.map((x:any)=>{
        if (x?.url) {
          if (state.form.payment_voucher == "") {
            state.form.payment_voucher = x.url;
          } else {
            state.form.payment_voucher =
              state.form.payment_voucher + "," + x.url;
          }
        }
      })
      e.form.id_nolist.map((x:any)=>{
        if (x?.url) {
          if (state.form.identification == "") {
            state.form.identification = x.url;
          } else {
            state.form.identification =
              state.form.identification + "," + x.url;
          }
        }
      })
      e.form.legal_person_list.map((x:any)=>{
        if (x?.url) {
          if (state.form.idcard_of_legal_person == "") {
            state.form.idcard_of_legal_person = x.url;
          } else {
            state.form.idcard_of_legal_person =
              state.form.idcard_of_legal_person + "," + x.url;
          }
        }
      })
      e.form.application_form_list.map((x:any)=>{
        if (x?.url) {
          if (state.form.application_form == "") {
            state.form.application_form = x.url;
          } else {
            state.form.application_form =
              state.form.application_form + "," + x.url;
          }
        }
      })
      if (state.form.payment_voucher == "") {
        message.error("图片不能超过2M,上传不成功");
        e.done();
        return;
      }
      console.log("2222",state.form);
      $AddVoucher({
        order_no: state.form.order_no,
        payment_voucher: state.form.payment_voucher,
        identification:state.form.identification,
        idcard_of_legal_person:state.form.idcard_of_legal_person,
        application_form:state.form.application_form,
      })
        .then((res: any) => {
          message.success("上传凭证成功");
          emit("confirm");
          addPopupRef.value.close();
        })
        .finally(() => {
          e.done();
        });
    };
    const addPopupRef = ref(null as any);
    const open = (e: any, status: any) => {
      state.status = status;
      state.form.voucherlist=[],
      state.form.id_nolist = [],
      state.form.legal_person_list=[],
      state.form.application_form_list=[],
      state.form.payment_voucher = "";
      state.form.identification =  "";
      state.form.idcard_of_legal_person =  "";
      state.form.application_form = "";
      state.remark = "";
      state.pay_time = "";
      if (e) {
        state.form.order_no = e;
      }
      if(status == 10 || status == 11 || status == 12)
      {
         $groupOrderPayDetail({order_no:e}).then((res:any)=>{
           if(status != 12)
           {
            state.form.payment_voucher = res?.data?.payment_voucher;
            state.form.identification = res?.data?.identification || "";
            state.form.idcard_of_legal_person = res?.data?.idcard_of_legal_person || "";
            state.form.application_form = res?.data?.application_form || "";
            state.pay_time = res?.data?.pay_time;
           }
             state.remark = res?.data?.remark;
         })
      }
      addPopupRef.value.open();
    };
    const close = () => {
      addPopupRef.value.close();
    };
    expose({
      open,
      close,
    });
    //手动上传
    const beforeUploadPhoto: UploadProps["beforeUpload"] = (file: any) => {
      message.loading({ content: '上传中...', key: 'loading' });
      getBase64ByFile(file)
        .then((base64_img: any) => {
          $uploadImg({ base64_img })
            .then((res: any) => {
              message.success({ content: '上传完成!', key: 'loading', duration: 2 });
              // voucherlist: [],
              // id_nolist: [],
              // legal_person_list: [],
              // application_form_list: [],
              state.form.voucherlist[0].url = res.data?.url;
            })
            .catch((error:any) => {
              
            });
        })
        .catch(() => {
          
        });
      return false;
    };
    //证件照
    const beforeUploadPhotoId: UploadProps["beforeUpload"] = (file: any) => {
      message.loading({ content: '上传中...', key: 'loading' });
      getBase64ByFile(file)
        .then((base64_img: any) => {
          $uploadImg({ base64_img })
            .then((res: any) => {
              message.success({ content: '上传完成!', key: 'loading', duration: 2 });
              state.form.id_nolist[0].url = res.data?.url;
            })
            .catch((error:any) => {
              
            });
        })
        .catch(() => {
          
        });
      return false;
    };
    //法人
     const beforeUploadPhotoLegal: UploadProps["beforeUpload"] = (file: any) => {
      message.loading({ content: '上传中...', key: 'loading' });
      getBase64ByFile(file)
        .then((base64_img: any) => {
          $uploadImg({ base64_img })
            .then((res: any) => {
              message.success({ content: '上传完成!', key: 'loading', duration: 2 });
              // voucherlist: [],
              // id_nolist: [],
              // legal_person_list: [],
              // application_form_list: [],
              state.form.legal_person_list[0].url = res.data?.url;
            })
            .catch((error:any) => {
              
            });
        })
        .catch(() => {
          
        });
      return false;
    };
       //投保单
       const beforeUploadPhotoApplication: UploadProps["beforeUpload"] = (file: any) => {
        message.loading({ content: '上传中...', key: 'loading' });
        getBase64ByFile(file)
          .then((base64_img: any) => {
            $uploadImg({ base64_img })
              .then((res: any) => {
                message.success({ content: '上传完成!', key: 'loading', duration: 2 });
                // voucherlist: [],
                // id_nolist: [],
                // legal_person_list: [],
                // application_form_list: [],
                state.form.application_form_list[0].url = res.data?.url;
              })
              .catch((error:any) => {
                
              });
          })
          .catch(() => {
            
          });
        return false;
      };
    const UploadVoucher = () => (
      <LForm
        btns={["cancel", "confirm"]}
        v-model={state.form}
        rules={state.rules}
        onCancel={() => {
          cancelHandler();
        }}
        onConfirm={(e: any) => {
          confirmHandler(e);
        }}
      >
        <LFormItem label="上传缴费凭证" prop="voucherlist">
          <a-upload
            list-type="picture-card"
            v-model:fileList={state.form.voucherlist}
            before-upload={beforeUploadPhoto}
            // onPreview={photoHandlePreview}
            // onChange={photoHandleChange}
          >
            {state.form.voucherlist.length == 0 && (
              <div>
                <PlusOutlined />
                <div>Upload</div>
              </div>
            )}
          </a-upload>
        </LFormItem>
        <LFormItem label="示例图" prop="">
          <div class={styles.contentBox}>
          <div class={styles.imageBox}>
                 <div class={[styles["image_box"]]}>
                 <a-image src={require("@/assets/image/wechatPay.jpeg")} width={"100px"} height={"100px"}></a-image>
                 </div>
           </div>
           <div>上传图片需完整体现交易金额、交易单号、商户单号等信息</div>
          </div>
        </LFormItem>
        {/* <LFormItem label="证件照" prop="">
          <a-uploads
            list-type="picture-card"
            v-model:fileList={state.form.id_nolist}
            before-upload={beforeUploadPhotoId}
            // onPreview={photoHandlePreview}
            // onChange={photoHandleChange}
          >
            {state.form.id_nolist.length == 0 && (
              <div>
                <PlusOutlined />
                <div>Upload</div>
              </div>
            )}
          </a-upload>
        </LFormItem>
        <LFormItem label="法人身份证" prop="">
          <a-upload
            list-type="picture-card"
            v-model:fileList={state.form.legal_person_list}
            before-upload={beforeUploadPhotoLegal}
            // onPreview={photoHandlePreview}
            // onChange={photoHandleChange}
          >
            {state.form.legal_person_list.length == 0 && (
              <div>
                <PlusOutlined />
                <div>Upload</div>
              </div>
            )}
          </a-upload>
        </LFormItem>
        <LFormItem label="投保单" prop="">
          <a-upload
            list-type="picture-card"
            v-model:fileList={state.form.application_form_list}
            before-upload={beforeUploadPhotoApplication}
            // onPreview={photoHandlePreview}
            // onChange={photoHandleChange}
          >
            {state.form.application_form_list.length == 0 && (
              <div>
                <PlusOutlined />
                <div>Upload</div>
              </div>
            )}
          </a-upload>
        </LFormItem> */}
        {
           state.remark && <LFormItem label="备注:" prop="">
           <div>{state.remark}</div>
         </LFormItem>
        }
      </LForm>
    );
    const LookVoucher = () => (
      <LForm
        btns={["confirm"]}
        v-model={state.form}
        onConfirm={(e: any) => {
          e.done();
          addPopupRef.value.close();
        }}
      >
        <LFormItem label="上传缴费凭证" prop="">
          <a-image
            width={100}
            src={state.form.payment_voucher}
          />
        </LFormItem>
        {/* <LFormItem label="证件照" prop="">
          <a-image
            width={100}
            src={state.form.identification}
          />
        </LFormItem>
        <LFormItem label="法人身份证" prop="">
          <a-image
            width={100}
            src={state.form.idcard_of_legal_person}
          />
        </LFormItem>
        <LFormItem label="投保单" prop="">
          <a-image
            width={100}
            src={state.form.application_form}
          />
        </LFormItem> */}
        {
           state.pay_time &&  <LFormItem label="缴费时间" prop="">
            <div>{state.pay_time}</div>
          </LFormItem>
        }
          {
           state.remark && <LFormItem label="备注:" prop="">
           <div>{state.remark}</div>
         </LFormItem>
        }
      </LForm>
    );
    const Components = () => (
      <LPopup title={"缴费凭证"} ref={addPopupRef}>
        <div>
          <div>
            { (state.status == 0 || state.status == 12) && <UploadVoucher />}
            {(state.status == 10 || state.status == 11) && <LookVoucher />}
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});
